<template>
    <div>
<h1>创建选宿舍活动</h1>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="eventForm">
  <el-form-item label="活动名称" prop="event_name"> 
    <el-input placeholder="第一轮" v-model="ruleForm.event_name"></el-input>
   </el-form-item> 
  <el-form-item label="开始时间" prop="start_time">
        <el-date-picker type="datetime" placeholder="选择日期时间" v-model="ruleForm.start_time" style="width: 100%;" 
        :picker-options="editStartOptions"
        ></el-date-picker>
  </el-form-item>
  <el-form-item label="结束时间" prop="end_time">
        <el-date-picker type="datetime" placeholder="选择日期时间" v-model="ruleForm.end_time" style="width: 100%;"
        :picker-options="editStopOptions"
        ></el-date-picker>
  </el-form-item>
  <!-- <el-form-item >
    <template slot="label">
      设置选中房间释放百分比
      <el-tooltip class="item" effect="dark"  placement="right-start">
        <div slot="content">点击确定后，计算规则为：<br>单个选中房间的设置库存=剩余床位*百分比(四舍五入取整)</div>
        <el-icon class="el-icon-info"> </el-icon>
    </el-tooltip> -->
 
	<!-- </template>
    <el-input-number size="small" v-model="ratio" :min="0" :max=100 label="统一设置选择百分比" ></el-input-number>
    <span style="margin:10px">%</span>
    <el-button @click="setPercentage" >确定</el-button> -->
    <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
  <!-- </el-form-item> -->
  <!-- <el-form-item label="房间配置" prop="rooms" > -->
    <!-- <el-table
    show-summary
    :summary-method="getSummaries"
    max-height="400"
    ref="multipleTable"
    :data="rooms"
    tooltip-effect="dark"
    style="width: 100%"

    @selection-change="handleSelectionChange">
    <el-table-column
    :selectable="checkSelectable"
      type="selection"
      width="55"> -->
    <!-- </el-table-column>
    <el-table-column prop="room_id" label="房间号" width="auto" />
    <el-table-column  
    prop="building_id" label="宿舍楼" width="auto"
    :filters="buildingFilter"
    :filter-method="filterBuilding"
    filter-placement="bottom-end"
    ></el-table-column>
    <el-table-column  
    prop="room_gender" label="性别" width="auto"
    :filters="[{ text: '男', value:  1 }, { text: '女', value: 0}]"
    :filter-method="filterGender"
    filter-placement="bottom-end"
    >
      <template slot-scope="scope">
      <p>{{ genderConvert(scope.row.room_gender)}}
      </p>
      </template></el-table-column>
    <el-table-column prop="room_type"  sortable label="几人间" width="auto"
    :filters="[{ text: '单人间', value:  1 }, { text: '二人间', value: 2}, { text: '三人间', value: 3}, { text: '四人间', value: 4}, { text: '五人间', value: 5}, { text: '六人间', value: 6}, { text: '七人间', value: 2}, { text: '八人间', value: 8}]"
    :filter-method="filterPeople"
    filter-placement="bottom-end"
    >
      <template slot-scope="scope">
        <i class="el-icon-s-custom" v-for="o in scope.row.room_type" :key="o"></i>
      </template>
    </el-table-column>
    <el-table-column prop="room_inventory"  sortable label="剩余床位" 
    :filters="[{ text: '>0', value:  0 }, { text: '>2', value: 2}, { text: '>3', value: 3}, { text: '>4', value: 4}]"
    :filter-method="filterStock"
    filter-placement="bottom-end"
    with="auto"/>
    <el-table-column prop="sec_inventory"  sortable label="设置库存" 
    width="auto">
    <template slot-scope="scope">
      <el-input-number size="small" v-model="scope.row.sec_inventory" :min="0" :max=scope.row.room_inventory label="描述文字"></el-input-number>
    </template>
    </el-table-column>
  </el-table> -->


 
       
  <!-- </el-form-item> -->



  <el-form-item>
    <el-button type="primary" @click="submitForm()">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
<!-- </el-form>
{{ buildingFilter }}
    </div> -->
    </el-form>
 
    </div>
</template>

<script>
// import {getAllBuildings} from '@/api/dormitory'
// import { getAllBuildings } from '@/api/dormitory'
// import{getAllRooms} from '@/api/room.js'
import{createEvent} from '@/api/event.js'
// import { genderConvert } from '@/utils/convert'
  export default {
    data() {
      return {
        ruleForm: {
          event_name: '',
          start_time:"",
          end_time:"",
          // seckill_inventory:'',
       
          rooms:[],
       
      
      
        },
        ratio:100,
        buildingFilter:[],
  
       rooms:[],
   
        rules: {
          event_name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          // region: [
          //   { required: true, message: '请选择活动区域', trigger: 'change' }
          // ],
          start_time: [
            { required: true, message: '请选择开始时间', trigger: 'blur' },
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' },
          
          ],
          end_time: [
          { required: true, message: '请选择开始时间', trigger: 'blur' },
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          rooms: [
            { type: 'array', required: true, message: '请至少选择一个房间', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ],
          
        },
        editStartOptions: {
          //限制日期
        disabledDate: time => {
          if (!this.ruleForm.end_time) {
            //不减去-8.64e7的话，当前日期也被去掉了
           return time.getTime() < new Date().getTime()-8.64e7;   //禁止选择1970年以前的日期
          } else {
          return time.getTime() > new Date(this.ruleForm.end_time).getTime();
          }
        },
        //限制时间
        // selectableRange:()=>{
        
        //   if(new Date(this.ruleForm.end_time).getTime()<=new Date().getTime()-8.64e7)
        //     return new Date().getHours() + ':'+(new Date().getMinutes()+1)+':00' + '- 23:59:59'
        //   else  '00:00:00 - 23:59:59'
        // }
        
      },
      editStopOptions: {
        disabledDate: time => {
          return (
            time.getTime() < new Date(this.ruleForm.start_time).getTime()-8.64e7||
            time.getTime() < new Date().getTime()-8.64e7    //禁止选择1970年以前的日期
          );
        }
      },

   
       
        multipleSelection: []
      
    
    }},
    
    mounted(){
      //  var that=this;
      //   getAllRooms().then(res=>{
      //       res.data.forEach(function(room){
      //         room.sec_inventory=room.room_inventory;
      //       })
      //       this.rooms=res.data
      //       }),
      //     getAllBuildings().then(resp=>{
      //       resp.data.forEach(function(building){
      //         var data={
      //         "text":building.building_id,
      //         "value":building.building_id
      //       }
      //       that.buildingFilter.push(data);
      //       })
           
            
           
      //     })
       
      
    },
    computed: {
      // ratio:function(){
      //   var sum1=0;
      //   var sum2=0
      //       this.ruleForm.rooms.forEach(function(room){
      //         sum1+=room.sec_inventory;
      //       })
      //       this.rooms.forEach(function(room){
      //         sum2+=room.room_inventory;
      //       })
      //   return (sum1/sum2)*100;
      // }
    },
    methods: {
        //提交表格
      submitForm() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            // alert('submit!');
            createEvent(this.ruleForm).then(res=>{
              if(res.code==200){
                this.$message.success(res.msg)
                this.$router.push("/event/eventList")
              }
              else this.$message.error(res.msg)
            })

          } else {
            // console.log('error submit!!');
            return false;
          }
        });
    },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //多选
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //设置百分比
    //   setPercentage(){
    //    var that=this;
        
    //     if(that.ratio!==null){
    //       that.ruleForm.rooms.forEach(function(room){
    //         // var index;
    //         // index=that.rooms.indexOf(room);
    //         // alert(index)
    //         var r=that.ratio/100;
    //         room.sec_inventory=Math.round(room.room_inventory*r);
    //         // that.ruleForm.rooms[index].sec_inventory=res;
            
         
    //       })
    //       // this.ratio='';
    //     }
    //   },


    //   handleSelectionChange(val) {
    //     this.ruleForm.rooms = val;
    //   },
    //   handleTabClick(tab, event) {
    //     console.log(tab, event);
    //   },
    //   //filter
    //   filterPeople(value, row) {
    //     return row.room_type === value;
    //   },
    //   filterStock(value, row) {
    //     return row.room_inventory>value;
    //   },
    //   filterBuilding(value, row) {
    //     return row.building_id===value;
    //   },
    //   filterHandler(value, row, column) {
    //     const property = column['property'];
    //     return row[property] === value;
    //   },
    //   genderConvert(value){
    //   return genderConvert(value)
    // },
    // filterGender(value, row) {
    //     return row.room_gender === value;
    //   },
    //   checkSelectable(row){
    //     return row.room_inventory>0&&row.sec_inventory>0
    //   },

        // const { columns, data } = param;
      //   getSummaries(param) {
      //   const { columns, data } = param;
      //   var that=this;
      //   const sums = [];
      //   columns.forEach((column, index) => {
      //     // if(index<4) {
      //     //   sums[index]=""
      //     //   return ;
      //     // }
      //     if (index === 0) {
      //       sums[index] = '合计';
      //       return;
      //     }
      //     if(index===1){
      //       sums[index]="房间共"+that.rooms.length+"间"
      //     }
      //     if(index===5){
      //     const values = data.map(item => Number(item[column.property]));
      //     if (!values.every(value => isNaN(value))) {
      //       sums[index] = values.reduce((prev, curr) => {
      //         const value = Number(curr);
      //         if (!isNaN(value)) {
      //           return prev + curr;
      //         } else {
      //           return prev;
      //         }
      //       }, 0);
      //       sums[index] ="总共剩余"+sums[index]+"床位"
      //     } }
      //     else if(index===6){
      //       // sums[index] = 'N/A';
      //       var sum=0;
      //       that.ruleForm.rooms.forEach(function(room){
      //         sum+=room.sec_inventory;
      //       })
      //       sums[index]="选择"+sum+"床位";
      //       return ;
      //     }
      //   });

      //   return sums;
      // }
  }}


    //   do_getRoomsByBuildingID(bid){
    //     getRoomsByBuildingID(bid).then(res=>{
    //         if(res.code==200) return res.data;
    //     })

  
</script>

<style>
.eventForm{
    width: 75%;
    margin: auto;
}
</style>